<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <h2 class="text-2xl font-bold text-gray-900">数据查询</h2>
      <div class="flex space-x-2">
        <button @click="exportData" class="btn btn-secondary">
          <i class="fas fa-download mr-2"></i>导出
        </button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="card">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">工单号</label>
          <input v-model="filters.workOrder" type="text" class="form-input" placeholder="搜索工单号">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">工单分类</label>
          <select v-model="filters.workOrderType" class="form-input">
            <option value="">全部</option>
            <option value="生产工单">生产工单</option>
            <option value="维修工单">维修工单</option>
            <option value="返工工单">返工工单</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">品号</label>
          <input v-model="filters.partNumber" type="text" class="form-input" placeholder="搜索品号">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">品名</label>
          <input v-model="filters.partName" type="text" class="form-input" placeholder="搜索品名">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">分类</label>
          <input v-model="filters.category" type="text" class="form-input" placeholder="搜索分类">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">类型</label>
          <select v-model="filters.type" class="form-input">
            <option value="">全部</option>
            <option value="标准">标准</option>
            <option value="定制">定制</option>
          </select>
        </div>
        <div class="flex items-end">
          <button @click="clearFilters" class="btn btn-secondary mr-2">清除</button>
          <button @click="searchData" class="btn btn-primary">搜索</button>
        </div>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="card">
      <div class="overflow-x-auto">
        <table class="table">
          <thead>
            <tr>
              <th>工单号</th>
              <th>工单分类</th>
              <th>品号</th>
              <th>品名</th>
              <th>规格</th>
              <th>分类</th>
              <th>工单数</th>
              <th>版本</th>
              <th>生产日期</th>
              <th>工序</th>
              <th>钢网TOP</th>
              <th>钢网BOT</th>
              <th>回流焊治具</th>
              <th>波峰焊治具</th>
              <th>压接治具</th>
              <th>BOM</th>
              <th>SOP</th>
              <th>生产资料</th>
              <th>类型</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in filteredData" :key="item.id">
              <td>{{ item.workOrder }}</td>
              <td>{{ item.workOrderType }}</td>
              <td>{{ item.partNumber }}</td>
              <td>{{ item.partName }}</td>
              <td>{{ item.specification }}</td>
              <td>{{ item.category }}</td>
              <td>{{ item.workOrderQuantity }}</td>
              <td>{{ item.version }}</td>
              <td>{{ item.productionDate }}</td>
              <td>{{ item.process }}</td>
              <td>
                <button @click="toggleStatus(item, 'stencilTop')" 
                        :class="getStatusButtonClass(item.stencilTop)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.stencilTop ? '✓' : '✗' }}
                </button>
              </td>
              <td>
                <button @click="toggleStatus(item, 'stencilBot')" 
                        :class="getStatusButtonClass(item.stencilBot)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.stencilBot ? '✓' : '✗' }}
                </button>
              </td>
              <td>
                <button @click="toggleStatus(item, 'reflowFixture')" 
                        :class="getStatusButtonClass(item.reflowFixture)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.reflowFixture ? '✓' : '✗' }}
                </button>
              </td>
              <td>
                <button @click="toggleStatus(item, 'waveFixture')" 
                        :class="getStatusButtonClass(item.waveFixture)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.waveFixture ? '✓' : '✗' }}
                </button>
              </td>
              <td>
                <button @click="toggleStatus(item, 'pressFixture')" 
                        :class="getStatusButtonClass(item.pressFixture)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.pressFixture ? '✓' : '✗' }}
                </button>
              </td>
              <td>
                <button @click="toggleStatus(item, 'bom')" 
                        :class="getStatusButtonClass(item.bom)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.bom ? '✓' : '✗' }}
                </button>
              </td>
              <td>
                <button @click="toggleStatus(item, 'sop')" 
                        :class="getStatusButtonClass(item.sop)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.sop ? '✓' : '✗' }}
                </button>
              </td>
              <td>
                <button @click="toggleStatus(item, 'productionMaterials')" 
                        :class="getStatusButtonClass(item.productionMaterials)"
                        class="px-2 py-1 rounded text-xs">
                  {{ item.productionMaterials ? '✓' : '✗' }}
                </button>
              </td>
              <td>{{ item.type }}</td>
            </tr>
            <tr v-if="filteredData.length === 0">
              <td colspan="19" class="text-center text-gray-500 py-8">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useDataStore } from '../stores'
import { showAlert } from '../utils/notifications'
import { exportData } from '../utils/export'
import type { WorkOrderData } from '../types'

const store = useDataStore()
const workOrderData = computed(() => store.workOrderData)

const filters = ref({
  workOrder: '',
  workOrderType: '',
  partNumber: '',
  partName: '',
  category: '',
  type: ''
})

const filteredData = computed(() => {
  return workOrderData.value.filter(item => {
    return (!filters.value.workOrder || item.workOrder.includes(filters.value.workOrder)) &&
           (!filters.value.workOrderType || item.workOrderType === filters.value.workOrderType) &&
           (!filters.value.partNumber || item.partNumber.includes(filters.value.partNumber)) &&
           (!filters.value.partName || item.partName.includes(filters.value.partName)) &&
           (!filters.value.category || item.category.includes(filters.value.category)) &&
           (!filters.value.type || item.type === filters.value.type)
  })
})

function getStatusButtonClass(status: boolean) {
  return status 
    ? 'bg-green-500 text-white hover:bg-green-600' 
    : 'bg-red-500 text-white hover:bg-red-600'
}

function toggleStatus(item: WorkOrderData, field: keyof WorkOrderData) {
  item[field] = !item[field]
  showAlert('状态已更新', 'success')
}

function clearFilters() {
  filters.value = {
    workOrder: '',
    workOrderType: '',
    partNumber: '',
    partName: '',
    category: '',
    type: ''
  }
}

function searchData() {
  // 搜索逻辑已在 computed 中实现
}

async function exportData() {
  try {
    await exportData({
      format: 'excel',
      data: filteredData.value,
      filename: '数据查询结果'
    })
    showAlert('导出成功', 'success')
  } catch (error) {
    showAlert('导出失败', 'error')
  }
}
</script>
